<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login" style="height: 100vh;">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="@/static/imgs/bg1.png"></image>
		<view style=" width: 260rpx;height: 260rpx;margin:100rpx auto;">
			<u--image :showLoading="true" src="/static/logo.png" width="260rpx" height="260rpx" radius='16rpx'>
			</u--image>
		</view>

		<!-- 标题 -->
		<view class="t-b">{{ title }}{{userInfo.name}} </view>
		<form class="cl" v-if="is_wxLogin">

			<button @tap="wxlogin()" style="background-color: #39B54A;">使 用 微 信 登 录</button>
			<u-row>
				<u--text @click="useACC" style="margin:40rpx 0;" text='手机号登录' align='center' color='#fff'></u--text>


			</u-row>
		</form>

		<view v-else>
			<form class="cl">
				<view class="t-a">
					<image src="@/static/imgs/sj.png"></image>
					<view class="line"></view>
					<input placeholder="请输入手机号" maxlength="11" v-model="mobile" />
				</view>
				<view class="t-a">
					<image src="@/static/imgs/yz.png"></image>
					<view class="line"></view>
					<input placeholder="请输入密码" v-model="password" />
				</view>
				<button @tap="login()">登 录</button>
			</form>
			<u-row style="margin-top:40rpx;">
				<u--text @click="regist" text='没有账号？去注册' align='center' color='#fff'></u--text>
				<u--text @click='getPass' text='忘记密码？' align='center' color='#fff'></u--text>

			</u-row>
			<view class="t-f"><text>————— 第三方账号登录 —————</text></view>
			<view class="t-e cl">
				<view class="t-g" @tap="wxLogin()">
					<image style="width: 100rpx;height: 100rpx;" src="@/static/imgs/wx.png"></image>
				</view>
			</view>
		</view>
		<view :class="!agree?'animate__bounce':''">
			<u-row>
				<u-checkbox-group placement="column" @change="checkboxChange">
					<u-checkbox name="1">
					</u-checkbox>
				</u-checkbox-group>
				<u--text text='阅读并同意用户许可协议' color='#fff'></u--text>
			</u-row>
		</view>
	</view>
</template>
<script>
	var that
	import mInit from '../../../tools/Init';
	let UserInfo = require('../../../service/UserInfo'),
		mUserInfo;
	// import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				userInfo: {},
				is_wxLogin: true,
				title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				mobile: '17671078240', //手机号码
				password: '199527',
				agree: false

			};
		},
		onLoad() {

			that = this
			uni.setStorageSync('token', '0d472ddd8aec488e9b5bba7db36001de')
			mInit.init(this.mNetTool, res => {
				console.log('初始化')
				this.userInfo = uni.getStorageSync('userInfo');
			});
			mUserInfo = new UserInfo(this.mNetTool)
		},
		computed: {
			// ...mapState('login',['$userInfo'])
		},
		methods: {
			checkboxChange(e) {
				console.log(e[0])
				if (e[0]) {
					that.agree = true
				} else {
					that.agree = false
				}
			},
			getPass() {
				uni.navigateTo({
					url: 'getpass/getpass'
				})
			},
			//login模块里的set方法
			// ...mapMutations('login',{setUserInfo:'SET_USERINFO'}),
			// 微信登录

			wxlogin() {
				if (!that.agree) {
					uni.$u.toast('请同意许可协议')
					return
				}
				uni.showLoading({
					title: '登陆中'
				})
				uni.getProvider({
					service: 'oauth',
					success: res => {
						console.log('res', res)
						uni.login({
							provider: 'weixin',
							success: R => {
								console.log('R', R)
								let access_token = R.authResult.access_token
								let openid = R.authResult.openid
								//   this.set_USERINFO('ww')
								mUserInfo.bywxlogin({
									open_id_wx: openid
								}, res => {
									console.log('登录结果', res)
									if (res.success) {
										if (res.row[0]) {
											uni.setStorageSync('userInfo', res.rows[0])
										}
									}

								})
							}
						})
						uni.getUserInfo({
							provider: 'weixin',
							success: uinfo => {
								console.log('uinfo', uinfo)
							}
						})
					}
				})
			},
			useACC() {
				that.is_wxLogin = false
			},
			// 跳转第二个登陆模版
			regist() {
				console.log('???/*  */')
				uni.navigateTo({
					url: 'register/index'
				});
			},
			//当前登录按钮操作
			login() {
				if (!that.agree) {
					uni.$u.toast('请同意许可协议')
					return
				}
				if (!that.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.mobile)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '登录中...'
				})
				console.log({
					mobile: that.mobile,
					password: that.password,
				})
				mUserInfo.login({
					mobile: that.mobile,
					password: that.password,
				}, res => {
					if (res.success) {
						uni.setStorageSync('userInfo', res.rows[0])
						that.setUserInfo(res.rows[0])
						console.log('先使用固定token')
						// 先使用固定token
						uni.setStorageSync('token', '835d19be5304462bb0f5ea34ec02f330')
						uni.switchTab({
							url: '../home/home'
						})
						console.log('获取token', res.rows[0])
						console.log('登录结果token', uni.getStorageSync('token'))
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.$u.toast('账号或密码错误')
					}
				})
			},
			//获取短信验证码
			getCode() {
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
					console.log(times);
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
				//这里请求后台获取短信验证码
				uni.request({
					//......//此处省略
					success: function(res) {
						that.showText = false;
					}
				});
			},
			//等三方微信登录
			wxLogin() {
				that.is_wxLogin = true
			},
			//第三方支付宝登录
			zfbLogin() {
				uni.showToast({
					title: '支付宝登录',
					icon: 'none'
				});
			}
		}
	};
</script>
<style>
	.click_double {
		animation: animate__bounce 2s;
	}

	page {
		background-size: 100% 100%;
		background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
		background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%), repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%), radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%), repeating-radial-gradient(99% 99% at 21% 78%, #2B184794 0%, #2B184794 51%, #073AFF00 100%), radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
	}

	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		/* margin-bottom: -200rpx; */
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #fff;
		padding: 15rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 120rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 50rpx auto 0;
	}

	.t-login .t-g {}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 90rpx 0 0 0;
		color: #9d9d9d;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>
